<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>六个模板练习</title>
</head>

<body>
    <!-- 轮播 -->
    <div id="demo" class="carousel slide" data-ride="carousel">

        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
        </ul>

        <!-- 轮播图片 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/lunbo1.jpg">
            </div>
            <div class="carousel-item">
                <img src="img/lunbo2.jpg">
            </div>
        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

    </div>
    <!-- 第一块模板 -->
    <div class="product">
        <div class="container">
            <div class="title">
                <h2>产品中心</h2>
                <p>Product design</p>
            </div>
            <div class="product_list">
                <ul class="row">
                    <li class="col-lg-3 col-md-6 col-sm-6 col-6">
                        <div class="product_list_box">
                            <div class="product_list_img">
                                <img src="img/img1.jpg" alt="">
                            </div>
                            <div class="product_list_text">
                                <p>养生肥牛</p>
                                <span></span>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-6 col-sm-6 col-6">
                        <div class="product_list_box">
                            <div class="product_list_img">
                                <img src="img/img2.jpg" alt="">
                            </div>
                            <div class="product_list_text">
                                <p>玫瑰圆子</p>
                                <span></span>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-6 col-sm-6 col-6">
                        <div class="product_list_box">
                            <div class="product_list_img">
                                <img src="img/img3.jpg" alt="">
                            </div>
                            <div class="product_list_text">
                                <p>红糖糍粑</p>
                                <span></span>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-6 col-sm-6 col-6">
                        <div class="product_list_box">
                            <div class="product_list_img">
                                <img src="img/img4.jpg" alt="">
                            </div>
                            <div class="product_list_text">
                                <p>胶原肥牛</p>
                                <span></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="more">
                <a href="#">
                MORE
            </a>
            </div>
        </div>
    </div>
    <!-- 第二块模块 -->
    <div class="material">
        <div class="container">
            <div class="title ">
                <h2>原材料制作</h2>
                <p>Raw material</p>
            </div>
            <div class="material_list">
                <ul class="row">
                    <li class="col-lg-4 col-md-4 col-sm-4 col-4">
                        <div class="material_list_box">
                            <img src="img/img5.png" alt="">
                            <div class="material_list_box_txt">
                                <h4>产地采购 溯源体系</h4>
                                <p>集团化采购优势及可追溯体系，从源头证火锅底料 原材料的新鲜、安全。西南、东北、东南全国采风， 实现原产地供应。
                                </p>
                            </div>
                            <span>01</span>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-4 col-sm-4 col-4">
                        <div class="material_list_box">
                            <img src="img/img6.png" alt="">
                            <div class="material_list_box_txt">
                                <h4>升华经典 打造极致</h4>
                                <p>火锅底料的呈味系统科学解构并量化。火锅连锁店标准化、稳定化、专业化。
                                </p>
                            </div>
                            <span>02</span>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-4 col-sm-4 col-4">
                        <div class="material_list_box">
                            <img src="img/img7.png" alt="">
                            <div class="material_list_box_txt">
                                <h4>优质研发 严控生产</h4>
                                <p>以火锅底料的优质研发为基础，有序管理每一道生产流程与工艺，确保每一款产品品质稳定、安全、放心。
                                </p>
                            </div>
                            <span>03</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="more">
                <a href="#">
                MORE
            </a>
            </div>
        </div>
    </div>
    <!-- 第三块模板 -->
    <div class="news">
        <div class="container">
            <div class="title">
                <h2>新闻动态</h2>
                <p>News</p>
            </div>
            <div class="news_list">
                <ul class="row">
                    <li class="col-lg-3">
                        <div class="news_list_box">
                            <img src="img/img8.jpg" alt="">
                        </div>
                    </li>
                    <li class="col-lg-5 col-md-12  col-sm-12 col-12">
                        <div class="news_list_box">
                            <h4>火锅底料烹制方法</h4>
                            <P>2017-10-29</P>
                            <P>原料四川豆瓣酱3汤匙、牛油100克、色拉油100克、干辣椒100克、花椒50克、白糖3汤匙、冰糖15克、老姜1小块</P>
                            <a href="#">MORE</a>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-12 col-sm-12 col-12">
                        <ul class="news_list_box news_list_txt">
                            <li>
                                <p>2018-11-13&nbsp;&nbsp;&nbsp; 新闻 标题 新闻 标题标题</p>
                                <span></span>
                            </li>
                            <li>
                                <p>2018-11-13&nbsp;&nbsp;&nbsp; 新闻 标题 新闻 标题标题</p>
                                <span></span>
                            </li>
                            <li>
                                <p>2018-11-13&nbsp;&nbsp;&nbsp; 新闻 标题 新闻 标题标题</p>
                                <span></span>
                            </li>
                            <li>
                                <p>2018-11-13&nbsp;&nbsp;&nbsp; 新闻 标题 新闻 标题标题</p>
                                <span></span>
                            </li>
                            <li>
                                <p>2018-11-13&nbsp;&nbsp;&nbsp; 新闻 标题 新闻 标题标题</p>
                                <span></span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 第四块模板 -->
    <div class="food">
        <div class="container">
            <div class="food_title">
                <h2>FOOD HOT POT</h2>
                <h3>美食中心</h3>
            </div>
            <div class="food_list">
                <ul class="row">
                    <li class="col-lg-4 col-md-6 col-sm-6 col-6">
                        <div class="food_list_box">
                            <div class="food_list_box_img">
                                <img src="img/img9.jpg" alt="">
                            </div>
                            <p>特色小吃</p>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-6 col-sm-6 col-6">
                        <div class="food_list_box">
                            <div class="food_list_box_img">
                                <img src="img/img10.jpg" alt="">
                            </div>
                            <p>特色小吃</p>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-6 col-sm-6 col-6">
                        <div class="food_list_box">
                            <div class="food_list_box_img">
                                <img src="img/img11.jpg" alt="">
                            </div>
                            <p>特色小吃</p>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-6 col-sm-6 col-6">
                        <div class="food_list_box">
                            <div class="food_list_box_img">
                                <img src="img/img12.jpg" alt="">
                            </div>
                            <p>特色小吃</p>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-6 col-sm-6 col-6">
                        <div class="food_list_box">
                            <div class="food_list_box_img">
                                <img src="img/img13.jpg" alt="">
                            </div>
                            <p>特色小吃</p>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-6 col-sm-6 col-6">
                        <div class="food_list_box">
                            <div class="food_list_box_img">
                                <img src="img/img14.jpg" alt="">
                            </div>
                            <p>特色小吃</p>
                        </div>
                    </li>
                </ul>

            </div>
            <div class="foodadd">
                <a href="#">更多美食</a>
            </div>
        </div>
    </div>
    <!-- 第五块模板 -->
    <div class="about">
        <div class="about_title">
            关于我们
        </div>
        <div class="container">
            <div class="about_list">
                <ul class="row">
                    <li class="col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="about_list_box">
                            <h2>公司简介</h2>
                            <span>ABOUT US ———</span>
                            <p>公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介</p>
                        </div>
                    </li>
                    <li class="col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="about_list_box">
                            <img src="img/img15.jpg" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 第六块模块 -->
    <div class="contact">
        <div class="container">
            <div class="contact_title">
                <h2>联系我们</h2>
                <div class="contact_title_img">
                    <img src="img/img16.jpg" alt=""> 4000000000
                </div>
                <div class="contact_list">
                    <ul class="row">
                        <li class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <div class="contact_list_box">
                                <img src="img/img18.png" alt="">
                                <div class="contact_list_box_txt">
                                    <p>QQ 联系方式<br> 123123123</p>
                                </div>
                            </div>

                        </li>
                        <li class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <div class="contact_list_box">
                                <img src="img/img19.png" alt="">
                                <div class="contact_list_box_txt">
                                    <p>QQ 联系方式<br> 123123123</p>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <div class="contact_list_box">
                                <img src="img/img20.png" alt="">
                                <div class="contact_list_box_txt">
                                    <p>QQ 联系方式<br> 123123123</p>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-3 col-md-6 col-sm-6 col-6">
                            <div class="contact_list_box">
                                <img src="img/img21.png" alt="">
                                <div class="contact_list_box_txt">
                                    <p>QQ 联系方式<br> 123123123</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 第七块模板 -->
    <div class="our">
        <div class="container">
            <div class="our_title">
                <h2>我们的优势</h2>
                一粥一饭当思来之不易来之不易<br> Our advantages
            </div>
            <div class="our_list">
                <ul class="row">
                    <li class="col-lg-3 col-md-6 col-6">
                        <div class="our_list_box">
                            <div class="our_list_box_img">
                                <img src="img/img22.png" alt="">
                                <div class="our_list_box_image">
                                    <img src="img/img26.png" alt="">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-6 col-6">
                        <div class="our_list_box">
                            <div class="our_list_box_img">
                                <img src="img/img23.jpg" alt="">
                                <div class="our_list_box_image">
                                    <img src="img/img27.png" alt="">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-6 col-6">
                        <div class="our_list_box">
                            <div class="our_list_box_img">
                                <img src="img/img24.jpg" alt="">
                                <div class="our_list_box_image">
                                    <img src="img/img28.png" alt="">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-6 col-6">
                        <div class="our_list_box">
                            <div class="our_list_box_img">
                                <img src="img/img25.jpg" alt="">
                                <div class="our_list_box_image">
                                    <img src="img/img29.png" alt="">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>